<template>
    <div class="app-container">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" :rules="rules" class="form">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="旧密码" prop="oldLoginPwd">
                <el-input v-model="ruleForm.oldLoginPwd" type="password" placeholder="请输入旧密码" />
            </el-form-item>
            <el-form-item label="新密码" prop="loginPwd">
                <el-input v-model="ruleForm.loginPwd" type="password" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="确认新密码" prop="loginPwdConfirm">
                <el-input v-model="ruleForm.loginPwdConfirm" type="password" placeholder="请确认新密码" />
            </el-form-item>
            <el-button type="primary" class="btn" @click="handleEditConfirm">修改</el-button>
            <el-button type="info" class="btn" @click="handleBackBtn">返回</el-button>
        </el-form>
    </div>
</template>

<script>
import { setUser, getInfo } from "@/api/user"
export default {
    data() {
        return {
            ruleForm: {
                id: "",
                name: "",
                loginId: "",
                oldLoginPwd: "",
                loginPwd: "",
                loginPwdConfirm: ""
            },
            rules: {
                name: [{ required: true, trigger: "blur", message: "请输入用户名" }],
                oldLoginPwd: [
                    { required: true, message: "请输入旧密码", trigger: "blur" },
                    { min: 6, message: "密码长度不能小于6位", trigger: "blur" }
                ],
                loginPwd: [
                    { required: true, message: "请输入新密码", trigger: "blur" },
                    { min: 6, message: "密码长度不能小于6位", trigger: "blur" }
                ],
                loginPwdConfirm: [
                    { required: true, message: "请再次输入新密码", trigger: "blur" },
                    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.ruleForm.loginPwd) {
                                callback(new Error("两次输入密码不一致"))
                            } else {
                                callback()
                            }
                        }
                    }
                ]
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        handleBackBtn() {
            this.$router.go(-1)
        },
        handleEditConfirm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    setUser(this.ruleForm).then((res) => {
                        if (typeof res === "string") {
                            this.$message.error(JSON.parse(res).msg)
                            return
                        }
                        this.$message.success("修改密码成功，即将跳转到登录页")
                        this.$store.dispatch("user/logout").then(() => {
                            this.$router.push(`/login?redirect=${this.$route.fullPath}}`)
                        })
                    })
                } else {
                    this.$message.error("表单验证未通过，请检查")
                    return false
                }
            })
        },
        async fetchData() {
            const res = await getInfo()
            this.ruleForm.id = res.data.id
            this.ruleForm.name = res.data.name
            this.ruleForm.loginId = res.data.loginId
        }
    }
}
</script>

<style scoped>
.form {
    width: 500px;
}
.btn {
    margin: 10px 5px;
    width: 100px;
}
</style>
